<template >
<view class="container">
    <view class="address-list" v-if="addressList.length">
        <view class="item" v-for="(item, index) of addressList" :key="item.id" @click="selectAddress(index)"
          :data-address-id="item.id" :data-index="index">
            <div class="box">
                  <div class="top">
                      <p><span>{{item.consignee}}</span>{{item.phone}}</p>
                      <p>收货地址：{{item.address}}</p>
                  </div>
                  <div class="bottom">
                    <!-- <span :style="{'color':defaultColor}">默认地址</span> -->
                    <span></span>
                    <span @click.stop='showDetails(item.addressId)'> <img    src="/static/images/details.png"/> 删除</span>   
                    <span @click.stop='edit(item)'>  <img  style="padding-right:5px;"  src="/static/images/edit.png"/>编辑</span>
                    
                  </div>
            </div>
        </view>
    </view>
    <view class="empty-view" v-if="addressList.length <= 0">
      <image class="icon" src="http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/noAddress-26d570cefa.png"/>
      <text class="text">收货地址在哪里</text>
    </view>
    <div :style="{height:iphoneXb2}"  class="add-address">
          <view class="list"  @click="addressAddOrUpdate" data-address-id="0">新建</view>
    </div>
    <div style="height:50px;"></div>
</view>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'
import Vuex from 'vuex'
var app = getApp();
export default {
  
  data () {
    return {
      addressList: [],
      defaultColor:'#333333',
        iphoneXb2:'50px',

    }
  },
 
      
  onShow: function () {
    console.log('判断回来')
     this.getAddress();
  },
  
  async mounted () {
     this.iphoneXb2=app.globalData.iphoneH;
    await Promise.all([
      this.getAddress()
    ])
   
   
  },
  methods: {
    edit(val){
   
      this.$store.commit('GETeditAddressr',val);
 
  // console.log(val)
      wx.navigateTo({
        url: '../ucenter/addressAdd?id='+val.addressId
      })
    },
    showDetails(id){
      let that =this
       wx.showModal({
        title: '',
        content: '确定要删除地址？',
        success: async function (res) {
          console.log(res)
          if (res.confirm) {
           console.log(555)
            that.details(id)
    

          }
        }
      })
    },
  async  details(id){

  



        let data=  JSON.stringify({"addressId":id})
        const res= await api.AddressDel({'data':data})
  
        if(res.status==0){
            wx.showToast({
              title: '删除成功'
            });
          this.getAddress()
        }else{
            wx.showToast({
              title: res.msg
            });
        }
    },
    // 获取地址信息
    async getAddress () {
 
      let data=  JSON.stringify({})
        const res= await api.getAddressList({'data':data});
      // console.log('地址管理,请求结果', res);
    
        this.addressList = res.data;
     
    },
    // 点击修改图标，或者底部“新建”
    addressAddOrUpdate (event) {
       console.log('点击修改/新建地址', event)
      wx.navigateTo({
        url: '../ucenter/addressAdd'
      })
    },
    // 点击选中某个地址,返回checkout页
    selectAddress (index) {
   
    
      // 回到下单页
      // wx.redirectTo({
      //   url: '../shopping/checkout'
      // })
      
      this.$store.commit('GETchooseAddressr',index+1);
 console.log(this.$store.state.chooseAddress)
        wx.navigateBack()
    }
  },
  // 原生的分享功能
  onShareAppMessage: function () {
    return {
      title: 'dfcShop',
      desc: '大风车商场',
      path: '/pages/shopping/address'
    }
  }
}
</script>

<style lang='scss' scoped>
page{
    height: 100%;
    width: 100%;
    background: #f4f4f4;
}
.top{
  padding-left: 5vw;
  padding-bottom: 15px;
  p:nth-child(1){
    font-size: 14px;
    color: #333333;
    padding-top: 15px;
    span{
      padding-right: 16px;
    }
  }
  p:nth-child(2){
    color:rgba(51,51,51,0.6);
    font-size: 13px;
    padding-top: 10px;
  }
}
.bottom{
  margin-left: 5vw;
  border-top:1px solid #f4f4f4;
  img{
    width: 16px;
    height: 16px;;;

  }
  font-size: 13px;
  line-height: 35px;
  height: 35px;
  width:95vw;
  span:nth-child(2){
      color:#333333;
      float: right;
       padding-right: 5vw;
      padding-left: 2vw;
  }
   span:nth-child(3){
      color:#333333;
      float: right;
     
  }
}
.container{
  height: 100%;
  width: 100%;
  background: #f4f4f4;
}

.address-list{

    background: #fff url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/address-bg-bd30f2bfeb.png) 0 0 repeat-x;
    background-size: auto 10.5rpx;
    margin-bottom: 90rpx;
}

.address-list .item{
    border-bottom: 15px solid #f4f4f4;
    width: 100vw;
    align-items: center;
    display: flex;
    
}

 

.add-address{
   
    position: fixed;
    border-radius: 0;
    border: none;
    color: #fff;
    font-size: 29rpx;
    bottom: 0;
    left:0;
    background: #fff;
    width: 100vw;
    .list{
         background: #b4282d;
          text-align: center;
          width: 100%;
          height: 99rpx;
          line-height: 99rpx;
    }
}

.empty-view{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-view .icon{
  height: 248rpx;
  width: 258rpx;
  margin-bottom: 10rpx;
}

.empty-view .text{
  width: auto;
  font-size: 28rpx;
  line-height: 35rpx;
  color: #999;
}
</style>
